首页团队区域 Grid 布局实现
首页团队部分采用 Grid 布局实现不规则卡片排列。在 UnoCSS（类 Tailwind CSS 语法）中，Grid 相关的工具类与传统 CSS 属性一一对应：
| 功能 | CSS 属性 | UnoCSS 工具类 |
|---|---|---|
| 列跨度 | grid-column: span 3 / span 3 | col-span-3 |
| 行起始位置 | grid-row-start | row-start-{n} |
| 列起始位置 | grid-column-start | col-start-{n} |
| 列间距 | grid-column-gap | gap-x-{n} |
| 行间距 | grid-row-gap | gap-y-{n} |
核心布局代码示例：
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-600px p-4">
<!-- 第 1 个元素：从第 1 行第 1 列开始 -->
<div class="row-start-1 col-start-1 row-end-2 col-end-2">元素 1</div>
<!-- 第 2 个元素：从第 1 行第 2 列开始，跨 2 列 -->
<div class="row-start-1 col-start-2 col-span-2">元素 2</div>
<!-- 其他元素... -->
</div>
html
也可使用 grid-template-areas 的命名方式实现，通过 grid-template-rows 和 grid-template-columns 定义模板，再通过 grid-area 为各子元素分配区域。
详情页 Markdown 渲染的需求背景
课程详情页和项目详情页通常包含大量图文内容。如果使用传统 DOM 方式书写，存在以下问题：
- 结构固定：页面模板中硬编码的 mock 数据无法灵活变化
- 维护成本高：每次内容更新都需要修改 Vue 组件
- 与 CMS 脱节：后台内容管理系统（CMS）通常使用富文本编辑器或 Markdown 格式录入
因此，最佳方案是使用 Markdown 文件作为详情页的内容载体，配合 Vue 组件实现头部导航、底部 Footer 等固定区域，中间内容区域由 Markdown 渲染填充。
vite-plugin-vue-markdown 插件集成
插件选型
在 npmjs 上搜索 vue markdown，可找到两个主要插件：
- vite-plugin-markdown（vite-plugin-md）：功能丰富，需额外安装 code-builder、meta-builder、link-builder 等扩展模块
- vite-plugin-vue-markdown：轻量级方案，开箱即用，支持在 Markdown 中直接使用 Vue 组件
项目中选用 vite-plugin-vue-markdown 作为 Markdown 渲染方案。
安装与配置
安装依赖：
pnpm install -D vite-plugin-vue-markdown
bash
vite.config.ts 配置：
import Markdown from 'vite-plugin-vue-markdown'
export default defineConfig({
plugins: [
// ...其他插件
vue({
include: [/\.vue$/, /\.md$/], // 让 Vue 识别 .md 文件
}),
Markdown(),
],
})
ts
路由配置（vite-plugin-pages）：
// vite.config.ts 中 Pages 插件配置
Pages({
extensions: ['vue', 'md'], // 支持 .md 文件作为路由页面
})
ts
两个关键配置缺一不可：
vue.include添加.md后缀 -- 让 Vue 编译器处理 Markdown 文件Pages.extensions添加'md'-- 让路由插件将.md文件识别为页面
验证集成效果
创建测试文件 test.md：
# Hello World
markdown
启动开发服务器 pnpm dev，访问 http://localhost:5173/test，即可看到 Markdown 内容被渲染为页面，且默认 Layout 正常生效。
Markdown 中使用 Vue 组件
自动注册组件
要在 Markdown 文件中使用 Vue 组件，需要通过 unplugin-vue-components 实现自动注册。在其配置中添加 .md 文件的包含规则：
// vite.config.ts
Components({
// 原来的 loader 只匹配 .vue，现在已弃用 loader 选项
// 直接使用 include 选项
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
})
ts
Container 组件包裹内容
Markdown 渲染的图文默认会撑满整个视口宽度，需要使用 Container 组件约束内容宽度：
<!-- test.md -->
<Container>
<!-- Markdown 内容 -->
<div class="flex flex-col">
<!-- 图文内容 -->
</div>
</Container>
html
通过 flex flex-col 实现纵向排列，让文字和图片居中显示。
Swiper 轮播组件嵌入
在 Markdown 中直接嵌入 Swiper 轮播组件：
<script setup>
import { ref } from 'vue'
const items = ref([
{ image: 'https://example.com/img1.jpg', height: '500px' },
{ image: 'https://example.com/img2.jpg', height: '500px' },
{ image: 'https://example.com/img3.jpg', height: '500px' },
])
</script>
<Swiper :items="items" />
html
CMS 后台编辑流程
实际项目中，Markdown 内容通过 CMS 系统管理。编辑人员通过 UI 界面操作：
- 上传图片 -- 自动生成图片链接
- 设置标题 -- 每个图片对应一个名称
- 配置组件参数 -- 高度、宽度、内边距等
系统根据操作自动生成包含 Vue 组件标签的 Markdown 字符串，插入到 .md 文件中，由前端渲染引擎完成最终页面的呈现。
实现要点总结
| 步骤 | 说明 |
|---|---|
| 安装插件 | pnpm install -D vite-plugin-vue-markdown |
| 配置 Vue 插件 | include 中添加 .md 后缀 |
| 配置路由插件 | extensions 中添加 'md' |
| 配置组件自动注册 | include 中添加 .md 匹配 |
创建 .md 文件 | 在 pages 目录下编写 Markdown + Vue 组件 |
| 封装业务组件 | 将轮播等交互封装为独立组件，便于 Markdown 引用 |
↑